<!-- 分銷排行 -->
<template>
	<view class="dis-rank" :style="{'--color':vuex_config.themeColor1}">
		<!-- 头部排行榜 -->
		<view class="dis-rank-top">
			<view class="u-flex dis-rank-top-item" style="background-color: #ffffff;width:100%">
				<view class="dis-rank-item" v-for="(item,index) in navList" :key='index'
					:style="{position:'relative',top:index==1?'-20rpx':''}">
					<view class="dis-rank-image" :style="{width:index==1?'142rpx':'',height:index==1?'142rpx':''}">
						<image :src="`../../static/rank_${index}.png`" mode="" class="rank-f"></image>
						<image :src="item.nickname?item.headimgurl:'../../static/logo.png'" class="rang-user"></image>
						<image :src="`../../static/rank${index}.png`" class="rank-t"></image>
					</view>
					<view class="rank-user-name u-line-1">
						{{item.nickname || '暂无'}}
					</view>
					<view class="rank-user-number u-line-1" v-if="item.nickname">
						{{item.guest_count}}
					</view>
				</view>
			</view>
		</view>
		<view class="dis-rank-bottom" v-if="dataList.length > 3">
			<view class="u-flex rank-content" v-for="(item,index) in dataList" :key='index' v-if="index > 2">
				<view class="u-flex rank-left">
					<view class="rank-left-number">{{index+1}}</view>
					<image :src="item.headimgurl" class="rank-left-image"></image>
					<view class="u-flex rank-name">
						<view class="user-name u-line-1">{{item.nickname}}</view>
						<view class="rank-number">订单数量：{{item.order_count || 0}}</view>
					</view>
				</view>

				<view class="rank-right">
					<view class="single">{{item.guest_count || 0}}</view>
					<view class="deal">客人数量</view>
				</view>

			</view>
		</view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from "@/mixins/pagingMixin.js"
	export default {
		mixins: [pagingMixin],
		data() {
			return {
				navList: [], //头部前三名数据
			};
		},
		computed: {
			hide(data) {
				return function(data) {
					if (data <= 2) {
						return false
					} else {
						return true
					}
				}
			}
		},
		onLoad: function() {
			this.$initPage()
		},
		onReachBottom: function() {
			this.loadMore()
		},
		methods: {
			see() {
				console.log('{{dataList}}bb', this.dataList)
			},
			//初始化
			$initPage() {
				this._init_data('GetUsersRankingList', {}, {
					callBack: this.$formatData,
					option: {
						timeoutNum: 120000
					}
				})
			},
			$formatData(data, page) {
				let navList = data.slice(0, 3)
				if (!navList[0]) {
					navList = navList.concat([{}, {}, {}])
				} else if (!navList[1]) {
					navList = navList.concat([{}, {}])
				} else if (!navList[2]) {
					navList.push({})
				}
				// 数组第一位和第二位交换位置
				let two = navList[0]
				let one = navList[1]
				navList.splice(0, 2, one, two)
				this.navList = [].concat(navList)
				return data
			},
			loadMore() {
				this._load_data()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dis-rank {
		position: relative;
		padding-top: 450rpx;

		.dis-rank-top {
			display: flex;
			background-color: var(--color);
			box-shadow: 0px 2rpx 21rpx 0px rgba(255, 93, 0, 0.36);
			padding: 0 30rpx;
			height: 450rpx;
			align-items: center;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 10;
		}
	}

	.dis-rank-top-item {
		border-radius: 11rpx;
	}

	.dis-rank-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		overflow: hidden;
		background-color: #ffffff;
		height: 280rpx;
		padding-top: 40rpx;
		border-radius: 11rpx 11rpx 0 0;

		.dis-rank-image {
			// background-color: #ffffff;
			position: relative;
			width: 122rpx;
			height: 122rpx;
			border-radius: 50%;
		}

		.rang-user {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.rank-t {
			position: absolute;
			top: -20rpx;
			right: -5rpx;
			width: 59rpx;
			height: 48rpx;
			z-index: 99;
		}

		.rank-f {
			position: absolute;
			right: 50%;
			bottom: 0;
			transform: translate(50%);
			width: 141rpx;
			height: 33rpx;
			z-index: 99;
			// border-radius: 50%;
		}

		.rank-user-name {
			width: 100%;
			font-size: 30rpx;
			padding: 10rpx 0;
			text-align: center;
		}

		.rank-user-number {
			font-size: 30rpx;
			color: var(--color);
		}
	}

	.dis-rank-bottom {
		position: relative;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0px 0px;
		margin: 0 auto;
	}

	.rank-content {
		justify-content: space-between;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
		margin-bottom: 30rpx;

		&:last-of-type {
			border-bottom: none;
		}

		.rank-left {
			flex: 1;
			overflow: hidden;
		}
	}

	.rank-left-number {
		font-size: 30rpx;
		color: #333333;
	}

	.rank-name {
		flex: 1;
		overflow: hidden;
		flex-direction: column;
		align-items: flex-start;
	}

	.rank-left-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 30rpx;
	}

	.user-name {
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 5rpx;
	}

	.rank-number {
		font-size: 24rpx;
		color: #999;
	}

	.single {
		color: $sww-theme-price;
		font-size: 26rpx;
		margin-bottom: 5rpx;
	}

	.deal {
		font-size: 21rpx;
		color: #999999;
	}


	.rank-right {
		text-align: right;
	}
</style>
